<template>
  <div>
    <OnlineQueryForm :key="formKey" v-if="isReady && formConfig.formType === SysOnlineFormType.QUERY" :formConfig="formConfig" />
    <OnlineEditForm :key="formKey" v-if="isReady && formConfig.formType === SysOnlineFormType.FORM"
      :formConfig="formConfig" :rowData="rowData" :saveData="saveData"
      @close="onClose"
    />
    <OnlineOneToOneQueryForm :key="formKey" v-if="isReady && formConfig.formType === SysOnlineFormType.ONE_TO_ONE_QUERY" :formConfig="formConfig" @close="onClose" />
    <OnlineWorkflowForm :key="formKey" ref="workflow" v-if="isReady && formConfig.formType === SysOnlineFormType.FLOW"
      :readOnly="readOnly"
      :flowInfo="flowInfo"
      :formConfig="formConfig"
      @close="onClose"
    />
    <OnlineWorkOrderFrom :key="formKey"
      v-if="isReady && formConfig.formType === SysOnlineFormType.WORK_ORDER"
      :readOnly="readOnly"
      :entryId="entryId"
      :formConfig="formConfig"
      @close="onClose"
    />
    <van-row v-if="!isReady" type="flex" align="center" justify="center"
      style="width: 100vw; height: 100vh; background: white;"
    >
      <van-loading size="24px">加载中...</van-loading>
    </van-row>
  </div>
</template>

<script>
import OnlineQueryForm from './OnlineQueryForm.vue';
import OnlineEditForm from './OnlineEditForm.vue';
import OnlineOneToOneQueryForm from './OnlineOneToOneQueryForm.vue';
import OnlineWorkflowForm from './OnlineWorkflowForm.vue';
import OnlineWorkOrderFrom from './OnlineWorkOrderForm.vue';

import {
  OnlineFormController
} from '@/api/onlineController.js';

export default {
  name: 'onlineForm',
  props: {
    formId: {
      type: String
    },
    entryId: {
      type: String
    },
    rowData: {
      type: Object
    },
    saveData: {
      type: Boolean,
      default: true
    },
    flowInfo: {
      type: Object
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  components: {
    OnlineQueryForm,
    OnlineEditForm,
    OnlineOneToOneQueryForm,
    OnlineWorkflowForm,
    OnlineWorkOrderFrom
  },
  data() {
    return {
      formConfig: undefined,
      isReady: false,
      formKey: 0
    }
  },
  methods: {
    onClose (refresh = false, data) {
      this.$emit('close', refresh, data);
    },
    clear() {
      if (this.formConfig) {
        this.formConfig.datasourceMap = null;
        this.formConfig.relationMap = null;
        this.formConfig.tableMap = null;
        this.formConfig.columnMap = null;
        this.formConfig.dictMap = null;
        this.formConfig.linkageMap = null;
      }
      this.formConfig = null;
    },
    loadOnlineFormConfig() {
      this.isReady = false;
      if (this.formId == null) return;
      this.clear();
      OnlineFormController.render(this, {
        formId: this.formId
      }).then(res => {
        let onlineForm = res.data.onlineForm;
        let formConfigData = JSON.parse(onlineForm.widgetJson);
        formConfigData = formConfigData.mobile;
        if (formConfigData != null) {
          this.formConfig = {
            rawData: res.data,
            readOnly: this.readOnly,
            formName: onlineForm.formName,
            formType: onlineForm.formType,
            formKind: onlineForm.formKind,
            masterTableId: onlineForm.masterTableId,
            labelWidth: formConfigData.labelWidth,
            labelPosition: formConfigData.labelPosition,
            filterItemWidth: formConfigData.filterItemWidth,
            gutter: formConfigData.gutter,
            height: formConfigData.height,
            width: formConfigData.width,
            widgetList: formConfigData.widgetList,
            operationList: (formConfigData.operationList || []).sort((value1, value2) => {
              return (value1.showOrder || 0) - (value2.showOrder || 0)
            }),
            tableWidget: formConfigData.tableWidget,
            leftWidget: formConfigData.leftWidget,
            customFieldList: formConfigData.customFieldList,
            formEventList: formConfigData.formEventList,
            maskFieldList: formConfigData.maskFieldList
          }
          this.isReady = true;
        } else {
          this.$dialog.alert({
            title: '提示',
            message: '没有找到移动端配置信息！'
          }).finally(() => {
            this.$router.go(-1);
          });
        }
      }).catch(e => {
        console.log(e);
      });
    },
    getFormData (isDraft, variableList) {
      return this.$refs.workflow ? this.$refs.workflow.getFormData(isDraft, variableList) : Promise.reject();
    }
  },
  watch: {
    formId: {
      handler() {
        this.loadOnlineFormConfig();
        this.formKey++;
      },
      immediate: true
    }
  }
}
</script>

<style>
</style>
